<template>
  <el-dialog title="编辑客户" :visible.sync="editFormVisible" :close-on-click-modal="true" width="600px" v-drag>
    <el-form :model="editForm" label-width="110px" :rules="editFormRules" ref="editForm">
      <el-form-item label="客户编号" prop="customerNo">
        <el-input v-model="editForm.customerNo" autocomplete="off" style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input v-model="editForm.enterpriseName" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input v-model="editForm.contacts" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phoneNo">
        <el-input v-model="editForm.phoneNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="Tenant ID" prop="tenantId">
        <el-input v-model="editForm.tenantId" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="statusCode">
        <el-select v-model="editForm.statusCode" clearable placeholder="" style="width: 95%">
          <el-option v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="typeCode">
        <el-select v-model="editForm.typeCode" clearable placeholder="" style="width: 95%">
          <el-option v-for="dict in typeList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行业" prop="industryCode">
        <el-select v-model="editForm.industryCode" clearable placeholder="" style="width: 95%">
          <el-option v-for="dict in industryList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="regionCode">
        <el-select v-model="editForm.regionCode" clearable placeholder="" style="width: 95%">
          <el-option v-for="dict in regionList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="传真" prop="fax">
        <el-input v-model="editForm.fax" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="邮编" prop="zipCode">
        <el-input v-model="editForm.zipCode" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="网站" prop="website">
        <el-input v-model="editForm.website" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="addr">
        <el-input v-model="editForm.addr" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="发票抬头" prop="fpTitle">
        <el-input v-model="editForm.fpTitle" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="fpBankName">
        <el-input v-model="editForm.fpBankName" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="银行账号" prop="fpBankAccNo">
        <el-input v-model="editForm.fpBankAccNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开票电话" prop="fpPhoneNo">
        <el-input v-model="editForm.fpPhoneNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="税号" prop="fpTaxNo">
        <el-input v-model="editForm.fpTaxNo" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
      <el-form-item label="开票地址" prop="fpAddr">
        <el-input v-model="editForm.fpAddr" autocomplete="off" clearable style="width: 95%"></el-input>
      </el-form-item>
		  <el-form-item label="客户经理" prop="salesUserId">
        <el-select v-model="editForm.salesUserId" placeholder="" @change="onSalesChanged($event)"
                :remote-method="initSalesList" clearable filterable remote style="width: 95%">
          <el-option v-for="item in salesSlt.result.list" :key="item.val" :label="item.label" :value="item.val" />
          <el-pagination layout="total, prev, pager, next"
                hide-on-single-page
                @current-change="onSalesPageChanged"
                :current-page="salesSlt.pageNo"
                :page-size="salesSlt.pageSize"
                :total="salesSlt.result.size"/>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="5" placeholder="" v-model="editForm.remark" style="width: 95%"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="editFormVisible = false">取消</el-button>
      <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
	import {validatePhone} from '@/utils/validate';
	import {updateCustomer} from "@/api/system/customer";
  import {getSalesDropDownList} from "@/api/system/user";
	export default {
		data() {
			return {
        statusList: [],
        typeList: [],
        industryList: [],
        regionList:[],

        editFormVisible: false,//编辑界面是否显示
        editLoading: false,
        editFormRules: {
          customerNo: [
            {required: true, message: '请输入客户编号', trigger: 'blur'}
          ],
          enterpriseName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'}
          ],
          phoneNo: [
            {required: true, message: '请输入联系电话', trigger: 'blur'}
            , {validator: validatePhone, trigger: 'blur'}
          ]
        },
        //编辑界面数据
        editForm: {

        },
        //销售下拉列表
        salesSlt: {
          result: {
            size: 0,
            list: []
          },
          keywords: "",
          pageNo: 1,
          pageSize: 10
        }
      }
		},
		methods: {
      getCustomerStatusList() {
        this.getDicts("sys_customer_status").then(response => {
          this.statusList = response.data;
        });
      },
      getCustomerTypeList() {
        this.getDicts("sys_customer_type").then(response => {
          this.typeList = response.data;
        });
      },
      getCustomerIndustryList() {
        this.getDicts("sys_customer_industry").then(response => {
          this.industryList = response.data;
        });
      },
      getCustomerRegionList() {
        this.getDicts("sys_customer_region").then(response => {
          this.regionList = response.data;
        });
      },
			show: function(index, row) {
				this.editFormVisible = true;
        this.editForm = {
          id: row.id,
          customerNo: row.customerNo,
          enterpriseName: row.enterpriseName,
          contacts: row.contacts,
          phoneNo: row.phoneNo,
          tenantId: row.tenantId,
          statusCode: row.statusCode,
          typeCode: row.typeCode,
          industryCode: row.industryCode,
          regionCode: row.regionCode,
          fax: row.fax,
          email: row.email,
          zipCode: row.zipCode,
          website: row.website,
          addr: row.addr,
          fpTitle: row.fpTitle,
          fpBankName: row.fpBankName,
          fpBankAccNo: row.fpBankAccNo,
          fpPhoneNo: row.fpPhoneNo,
          fpTaxNo: row.fpTaxNo,
          fpAddr: row.fpAddr,
          salesUserId: row.salesUserId,
          remark: row.remark
        };
        this.resetForm("editForm");

        this.getCustomerStatusList();
        this.getCustomerTypeList();
        this.getCustomerIndustryList();
        this.getCustomerRegionList();

        if (row.salesUserId) {
          this.salesSlt.result.size = 1;
          this.salesSlt.result.list = [
            {
              val: row.salesUserId,
              label: row.salesUserName + " " + row.salesNickName
            }
          ];
				} else {
          this.initSalesList();
				}
			},

			//编辑
      editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            var params = "id=" + this.editForm.id
              + (this.editForm.customerNo ? "&customerNo=" + this.editForm.customerNo : "")
              + (this.editForm.enterpriseName ? "&enterpriseName=" + this.editForm.enterpriseName : "")
              + (this.editForm.contacts ? "&contacts=" + this.editForm.contacts : "")
              + (this.editForm.phoneNo ? "&phoneNo=" + this.editForm.phoneNo : "")
              + (this.editForm.tenantId ? "&tenantId=" + this.editForm.tenantId : "")
              + (this.editForm.statusCode ? "&statusCode=" + this.editForm.statusCode : "")
              + (this.editForm.typeCode ? "&typeCode=" + this.editForm.typeCode : "")
              + (this.editForm.industryCode ? "&industryCode=" + this.editForm.industryCode : "")
              + (this.editForm.regionCode ? "&regionCode=" + this.editForm.regionCode : "")
              + (this.editForm.fax ? "&fax=" + this.editForm.fax : "")
              + (this.editForm.email ? "&email=" + this.editForm.email : "")
              + (this.editForm.zipCode ? "&zipCode=" + this.editForm.zipCode : "")
              + (this.editForm.website ? "&website=" + this.editForm.website : "")
              + (this.editForm.addr ? "&addr=" + this.editForm.addr : "")
              + (this.editForm.fpTitle ? "&fpTitle=" + this.editForm.fpTitle : "")
              + (this.editForm.fpBankName ? "&fpBankName=" + this.editForm.fpBankName : "")
              + (this.editForm.fpBankAccNo ? "&fpBankAccNo=" + this.editForm.fpBankAccNo : "")
              + (this.editForm.fpPhoneNo ? "&fpPhoneNo=" + this.editForm.fpPhoneNo : "")
              + (this.editForm.fpTaxNo ? "&fpTaxNo=" + this.editForm.fpTaxNo : "")
              + (this.editForm.fpAddr ? "&fpAddr=" + this.editForm.fpAddr : "")
              + (this.editForm.salesUserId ? "&salesUserId=" + this.editForm.salesUserId : "")
              + (this.editForm.remark ? "&remark=" + this.editForm.remark : "");

            this.editLoading = true;
            updateCustomer(params).then(res => {
              this.$message({type: "success", message: res.msg});
              this.$refs['editForm'].resetFields();
              this.editFormVisible = false;
              this.editLoading = false;
              this.$emit("success", 1);
            }).catch((err) => {
              this.editLoading = false;
            });
          }
        });
      },

      initSalesList(keywords) {
        this.salesSlt.keywords = keywords;
        this.onSalesPageChanged(1, 10);
      },
      onSalesPageChanged(pno, psize) {
        if (pno != null) {
          this.salesSlt.pageNo = pno;
        }
        if (psize != null) {
          this.salesSlt.pageSize = psize;
        }
        var params = {keywords: this.salesSlt.keywords, pageNo: this.salesSlt.pageNo, pageSize: this.salesSlt.pageSize};
        getSalesDropDownList(params).then(resp => {
          this.salesSlt.result.size = resp.data.size;
          this.salesSlt.result.list = resp.data.list.map(item => {
            return {val: item.userId, label: item.userName + " " + item.nickName};
          });
        }).catch(resp => {
          this.salesSlt.result.size = 0;
          this.salesSlt.result.list = [];
        });
      },
      onSalesChanged(salesUserId) {
        if (salesUserId) {
          return;
        }
        this.initSalesList();
      }
		},
		mounted() {

		}
	}
</script>

<style>

</style>

